/*
 * @Author: Await
 * @Date: 2025-04-17 16:48:15
 * @LastEditors: Await
 * @LastEditTime: 2025-04-23 17:11:33
 * @Description: 坐标轴配置组件 - 简化版
 */
import React, { useState, useCallback, useEffect } from 'react';
import {
    Form,
    Switch,
    Input,
    Divider,
    Row,
    Col,
    Typography,
    InputNumber,
    Space,
    Tabs,
    Button,
    Popover,
    Modal,
    message,
    Select,
} from 'antd';
import { AxisConfig as AxisConfigType } from '../../../types';
import {
    SaveOutlined,
    DeleteOutlined,
    ExportOutlined,
    SettingOutlined
} from '@ant-design/icons';
import { useLocalStorage } from '../../../hooks';
import { useAxisPresets } from '../../../hooks';

// 定义轴线配置类型
interface AxisLineConfig {
    show?: boolean;
    lineStyle?: {
        color?: string;
        width?: number;
        type?: 'solid' | 'dashed' | 'dotted';

    };
}

// 定义刻度线配置类型
interface AxisTickConfig {
    show?: boolean;
    length?: number;
    lineStyle?: {
        color?: string;
        width?: number;
        type?: 'solid' | 'dashed' | 'dotted';
    };
}

// 定义分割线配置类型
interface SplitLineConfig {
    show?: boolean;
    lineStyle?: {
        color?: string | string[];
        width?: number;
        type?: 'solid' | 'dashed' | 'dotted';
    };
}

// 定义坐标轴名称配置类型
interface AxisNameConfig {
    show?: boolean;
    text?: string;
    location?: 'start' | 'middle' | 'end';
    textStyle?: {
        color?: string;
        fontSize?: number;
        fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | string | number;
    };
}

// 定义轴标签配置类型
interface AxisLabelConfig {
    show?: boolean;
    rotate?: number;
    color?: string;
    fontSize?: number;
    formatter?: string | ((params: any) => string);
    align?: 'left' | 'center' | 'right' | string;
    padding?: number | number[];
    fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | string | number;
    [key: string]: any; // 添加索引签名，允许使用字符串索引访问
}

// 组件属性定义
interface AxisConfigProps {
    xAxis?: AxisConfigType;
    yAxis?: AxisConfigType;
    onChange: (axisConfig: {
        // 轴标签配置
        xAxisLabel: AxisLabelConfig,
        yAxisLabel: AxisLabelConfig,
        // 轴线配置
        xAxisLine?: AxisLineConfig,
        yAxisLine?: AxisLineConfig,
        // 刻度线配置
        xAxisTick?: AxisTickConfig,
        yAxisTick?: AxisTickConfig,
        // 分割线配置
        xSplitLine?: SplitLineConfig,
        ySplitLine?: SplitLineConfig,
        // 坐标轴名称配置
        xAxisName?: AxisNameConfig,
        yAxisName?: AxisNameConfig,
        // 通用配置
        xAxisGeneral?: AxisGeneralConfig,
        yAxisGeneral?: AxisGeneralConfig
    }) => void;
}

// 默认值配置
const DEFAULT_VALUES = {
    fontSize: 12,
    rotate: 0
};

// 定义坐标轴通用配置类型
interface AxisGeneralConfig {
    type?: 'value' | 'category' | 'time' | 'log';
    position?: 'top' | 'bottom' | 'left' | 'right';
    inverse?: boolean;
    scale?: boolean;
    min?: number | string | 'dataMin' | ((value: any) => number);
    max?: number | string | 'dataMax' | ((value: any) => number);
    silent?: boolean;
    data?: string[] | number[] | (string | number)[]; // 添加data属性以支持自定义坐标轴数据
}

/**
 * 坐标轴配置组件
 */
const AxisConfig: React.FC<AxisConfigProps> = ({
    xAxis = {},
    yAxis = {},
    onChange
}) => {
    const [activeTab, setActiveTab] = useState('x');
    const [activeConfigTab, setActiveConfigTab] = useState('basic');
    const [showPresetModal, setShowPresetModal] = useState(false);
    const [presetName, setPresetName] = useState('');
    const [lastAppliedPreset, setLastAppliedPreset] = useLocalStorage<string>('last-applied-axis-preset', '');

    // 使用坐标轴预设钩子
    const { allPresets, saveAsPreset, deletePreset } = useAxisPresets();

    // 添加通用配置状态
    const [xAxisGeneral, setXAxisGeneral] = useState<AxisGeneralConfig>({
        type: 'category',
        position: 'bottom',
        inverse: false,
        scale: false
    });

    const [yAxisGeneral, setYAxisGeneral] = useState<AxisGeneralConfig>({
        type: 'value',
        position: 'left',
        inverse: false,
        scale: false
    });

    // 创建本地状态来存储轴标签配置
    const [xAxisLabel, setXAxisLabel] = useState<AxisLabelConfig>({
        show: false, // 提供默认值
        rotate: DEFAULT_VALUES.rotate,
        color: '#333333',
        fontSize: DEFAULT_VALUES.fontSize,
        align: 'center',
        fontWeight: 'normal'
    });

    const [yAxisLabel, setYAxisLabel] = useState<AxisLabelConfig>({
        show: false, // 提供默认值
        rotate: DEFAULT_VALUES.rotate,
        color: '#333333',
        fontSize: DEFAULT_VALUES.fontSize,
        align: 'right',
        fontWeight: 'normal'
    });

    // 添加轴线配置状态
    const [xAxisLine, setXAxisLine] = useState<AxisLineConfig>({
        show: true,
        lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
        }
    });

    const [yAxisLine, setYAxisLine] = useState<AxisLineConfig>({
        show: true,
        lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
        }
    });

    // 添加刻度线配置状态
    const [xAxisTick, setXAxisTick] = useState<AxisTickConfig>({
        show: true,
        length: 5,
        lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
        }
    });

    const [yAxisTick, setYAxisTick] = useState<AxisTickConfig>({
        show: true,
        length: 5,
        lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
        }
    });

    // 添加分割线配置状态
    const [xSplitLine, setXSplitLine] = useState<SplitLineConfig>({
        show: false,
        lineStyle: {
            color: '#E0E0E0',
            width: 1,
            type: 'solid'
        }
    });

    const [ySplitLine, setYSplitLine] = useState<SplitLineConfig>({
        show: true,
        lineStyle: {
            color: '#E0E0E0',
            width: 1,
            type: 'dashed'
        }
    });

    // 添加坐标轴名称配置状态
    const [xAxisName, setXAxisName] = useState<AxisNameConfig>({
        show: false,
        text: 'X轴',
        location: 'end',
        textStyle: {
            color: '#333',
            fontSize: 12,
            fontWeight: 'normal'
        }
    });

    const [yAxisName, setYAxisName] = useState<AxisNameConfig>({
        show: false,
        text: 'Y轴',
        location: 'end',
        textStyle: {
            color: '#333',
            fontSize: 12,
            fontWeight: 'normal'
        }
    });

    // 当props变化时更新本地状态
    useEffect(() => {
        setXAxisLabel(prev => ({
            ...prev,
            show: xAxis.axisLabel?.show !== undefined ? xAxis.axisLabel.show : prev.show,
            rotate: xAxis.axisLabel?.rotate ?? DEFAULT_VALUES.rotate,
            color: xAxis.axisLabel?.color ?? '#333333',
            fontSize: xAxis.axisLabel?.fontSize ?? DEFAULT_VALUES.fontSize,
            formatter: xAxis.axisLabel?.formatter as string | ((params: any) => string),
            align: xAxis.axisLabel?.align ?? 'center',
            padding: xAxis.axisLabel?.padding,
            fontWeight: xAxis.axisLabel?.fontWeight ?? 'normal'
        }));

        setYAxisLabel(prev => ({
            ...prev,
            show: yAxis.axisLabel?.show !== undefined ? yAxis.axisLabel.show : prev.show,
            rotate: yAxis.axisLabel?.rotate ?? DEFAULT_VALUES.rotate,
            color: yAxis.axisLabel?.color ?? '#333333',
            fontSize: yAxis.axisLabel?.fontSize ?? DEFAULT_VALUES.fontSize,
            formatter: yAxis.axisLabel?.formatter as string | ((params: any) => string),
            align: yAxis.axisLabel?.align ?? 'right',
            padding: yAxis.axisLabel?.padding,
            fontWeight: yAxis.axisLabel?.fontWeight ?? 'normal'
        }));
    }, [xAxis, yAxis]);

    // 处理数值类型的公共函数
    const handleNumberValue = (value: number | null | undefined, defaultValue: number): number => {
        if (value === null || value === undefined) {
            return defaultValue;
        }
        return value;
    };

    // 添加类型转换辅助函数，将非特定类型的Function转为具体函数类型
    const convertFormatter = (formatter: any): string | ((params: any) => string) | undefined => {
        if (typeof formatter === 'string' || formatter === undefined) {
            return formatter;
        }
        if (typeof formatter === 'function') {
            return ((params: any) => (formatter as Function)(params)) as ((params: any) => string);
        }
        return undefined;
    };

    // 添加转换函数，用于转换min和max的类型
    const convertMinMax = (value: any): number | string | 'dataMin' | 'dataMax' | ((value: any) => number) | undefined => {
        if (typeof value === 'number' || typeof value === 'string' || value === undefined) {
            return value;
        }
        if (typeof value === 'function') {
            return ((v: any) => (value as Function)(v)) as ((value: any) => number);
        }
        return undefined;
    };

    // 应用预设
    const applyPreset = useCallback((presetConfig: { xAxis: AxisConfigType, yAxis: AxisConfigType }) => {
        // 从完整配置中提取各项属性
        const xLabel = presetConfig.xAxis.axisLabel || {};
        const yLabel = presetConfig.yAxis.axisLabel || {};
        const xLine = presetConfig.xAxis.axisLine || {};
        const yLine = presetConfig.yAxis.axisLine || {};
        const xTick = presetConfig.xAxis.axisTick || {};
        const yTick = presetConfig.yAxis.axisTick || {};
        const xSplit = presetConfig.xAxis.splitLine || {};
        const ySplit = presetConfig.yAxis.splitLine || {};

        // 处理坐标轴名称，使用nameShow明确控制显示，而不是依赖name属性存在与否
        const xNameConfig = {
            show: presetConfig.xAxis.nameShow !== undefined ? presetConfig.xAxis.nameShow : false,
            text: presetConfig.xAxis.name || 'X轴',
            location: presetConfig.xAxis.nameLocation || 'end',
            textStyle: presetConfig.xAxis.nameTextStyle || {
                color: '#333',
                fontSize: 12,
                fontWeight: 'normal'
            }
        };

        const yNameConfig = {
            show: presetConfig.yAxis.nameShow !== undefined ? presetConfig.yAxis.nameShow : false,
            text: presetConfig.yAxis.name || 'Y轴',
            location: presetConfig.yAxis.nameLocation || 'end',
            textStyle: presetConfig.yAxis.nameTextStyle || {
                color: '#333',
                fontSize: 12,
                fontWeight: 'normal'
            }
        };

        // 处理通用配置
        const xGeneralConfig: AxisGeneralConfig = {
            type: presetConfig.xAxis.type || 'category',
            position: presetConfig.xAxis.position || 'bottom',
            inverse: Boolean(presetConfig.xAxis.inverse),
            scale: Boolean(presetConfig.xAxis.scale),
            min: convertMinMax(presetConfig.xAxis.min),
            max: convertMinMax(presetConfig.xAxis.max)
        };

        const yGeneralConfig: AxisGeneralConfig = {
            type: presetConfig.yAxis.type || 'value',
            position: presetConfig.yAxis.position || 'left',
            inverse: Boolean(presetConfig.yAxis.inverse),
            scale: Boolean(presetConfig.yAxis.scale),
            min: convertMinMax(presetConfig.yAxis.min),
            max: convertMinMax(presetConfig.yAxis.max)
        };

        // 确保数值属性有默认值
        const xRotate = handleNumberValue(xLabel.rotate, DEFAULT_VALUES.rotate);
        const xFontSize = handleNumberValue(xLabel.fontSize, DEFAULT_VALUES.fontSize);
        const yRotate = handleNumberValue(yLabel.rotate, DEFAULT_VALUES.rotate);
        const yFontSize = handleNumberValue(yLabel.fontSize, DEFAULT_VALUES.fontSize);

        // 更新轴标签
        const newXAxisLabel: AxisLabelConfig = {
            show: Boolean(xLabel.show),
            rotate: xRotate,
            color: xLabel.color || '#333333',
            fontSize: xFontSize,
            formatter: convertFormatter(xLabel.formatter),
            align: xLabel.align || 'center',
            padding: xLabel.padding,
            fontWeight: xLabel.fontWeight || 'normal'
        };

        const newYAxisLabel: AxisLabelConfig = {
            show: Boolean(yLabel.show),
            rotate: yRotate,
            color: yLabel.color || '#333333',
            fontSize: yFontSize,
            formatter: convertFormatter(yLabel.formatter),
            align: yLabel.align || 'right',
            padding: yLabel.padding,
            fontWeight: yLabel.fontWeight || 'normal'
        };

        // 更新轴线
        const newXAxisLine = {
            show: xLine.show !== undefined ? Boolean(xLine.show) : true,
            lineStyle: {
                color: xLine.lineStyle?.color || '#333',
                width: xLine.lineStyle?.width || 1,
                type: xLine.lineStyle?.type || 'solid'
            }
        };

        const newYAxisLine = {
            show: yLine.show !== undefined ? Boolean(yLine.show) : true,
            lineStyle: {
                color: yLine.lineStyle?.color || '#333',
                width: yLine.lineStyle?.width || 1,
                type: yLine.lineStyle?.type || 'solid'
            }
        };

        // 更新刻度线
        const newXAxisTick = {
            show: xTick.show !== undefined ? Boolean(xTick.show) : true,
            length: xTick.length || 5,
            lineStyle: {
                color: xTick.lineStyle?.color || '#333',
                width: xTick.lineStyle?.width || 1,
                type: xTick.lineStyle?.type || 'solid'
            }
        };

        const newYAxisTick = {
            show: yTick.show !== undefined ? Boolean(yTick.show) : true,
            length: yTick.length || 5,
            lineStyle: {
                color: yTick.lineStyle?.color || '#333',
                width: yTick.lineStyle?.width || 1,
                type: yTick.lineStyle?.type || 'solid'
            }
        };

        // 更新分割线
        const newXSplitLine = {
            show: xSplit.show !== undefined ? Boolean(xSplit.show) : false,
            lineStyle: {
                color: xSplit.lineStyle?.color || '#E0E0E0',
                width: xSplit.lineStyle?.width || 1,
                type: xSplit.lineStyle?.type || 'solid'
            }
        };

        const newYSplitLine = {
            show: ySplit.show !== undefined ? Boolean(ySplit.show) : true,
            lineStyle: {
                color: ySplit.lineStyle?.color || '#E0E0E0',
                width: ySplit.lineStyle?.width || 1,
                type: ySplit.lineStyle?.type || 'dashed'
            }
        };

        // 更新所有状态
        setXAxisLabel(newXAxisLabel);
        setYAxisLabel(newYAxisLabel);
        setXAxisLine(newXAxisLine);
        setYAxisLine(newYAxisLine);
        setXAxisTick(newXAxisTick);
        setYAxisTick(newYAxisTick);
        setXSplitLine(newXSplitLine);
        setYSplitLine(newYSplitLine);
        setXAxisName(xNameConfig);
        setYAxisName(yNameConfig);
        setXAxisGeneral(xGeneralConfig);
        setYAxisGeneral(yGeneralConfig);

        // 更新父组件状态
        onChange({
            xAxisLabel: newXAxisLabel,
            yAxisLabel: newYAxisLabel,
            xAxisLine: newXAxisLine,
            yAxisLine: newYAxisLine,
            xAxisTick: newXAxisTick,
            yAxisTick: newYAxisTick,
            xSplitLine: newXSplitLine,
            ySplitLine: newYSplitLine,
            xAxisName: xNameConfig,
            yAxisName: yNameConfig,
            xAxisGeneral: xGeneralConfig,
            yAxisGeneral: yGeneralConfig
        });
    }, [onChange]);

    // 保存当前配置为预设
    const handleSavePreset = useCallback(() => {
        if (!presetName.trim()) {
            message.error('请输入预设名称');
            return;
        }

        // 构建包含所有坐标轴配置的完整配置对象
        const fullConfig = {
            xAxis: {
                ...xAxis,
                // 通用配置
                type: xAxisGeneral.type || 'category',
                position: xAxisGeneral.position || 'bottom',
                inverse: xAxisGeneral.inverse || false,
                scale: xAxisGeneral.scale || false,
                min: xAxisGeneral.min,
                max: xAxisGeneral.max,

                // 轴标签配置
                axisLabel: xAxisLabel,
                // 轴线配置
                axisLine: xAxisLine,
                // 刻度线配置
                axisTick: xAxisTick,
                // 分割线配置
                splitLine: xSplitLine,
                // 轴名称配置
                name: xAxisName.show ? xAxisName.text : undefined,
                nameLocation: xAxisName.show ? xAxisName.location : undefined,
                nameTextStyle: xAxisName.show ? xAxisName.textStyle : undefined,
                nameGap: 15, // 默认值
                show: true  // 默认显示坐标轴
            },
            yAxis: {
                ...yAxis,
                // 通用配置
                type: yAxisGeneral.type || 'value',
                position: yAxisGeneral.position || 'left',
                inverse: yAxisGeneral.inverse || false,
                scale: yAxisGeneral.scale || false,
                min: yAxisGeneral.min,
                max: yAxisGeneral.max,

                // 轴标签配置
                axisLabel: yAxisLabel,
                // 轴线配置
                axisLine: yAxisLine,
                // 刻度线配置
                axisTick: yAxisTick,
                // 分割线配置
                splitLine: ySplitLine,
                // 轴名称配置
                name: yAxisName.show ? yAxisName.text : undefined,
                nameLocation: yAxisName.show ? yAxisName.location : undefined,
                nameTextStyle: yAxisName.show ? yAxisName.textStyle : undefined,
                nameGap: 15, // 默认值
                show: true  // 默认显示坐标轴
            }
        };

        if (saveAsPreset(presetName, fullConfig)) {
            setShowPresetModal(false);
            setPresetName('');
            setLastAppliedPreset(presetName);
            message.success(`预设"${presetName}"已保存`);
        }
    }, [
        presetName, xAxis, yAxis,
        xAxisLabel, yAxisLabel,
        xAxisLine, yAxisLine,
        xAxisTick, yAxisTick,
        xSplitLine, ySplitLine,
        xAxisName, yAxisName,
        xAxisGeneral, yAxisGeneral,
        saveAsPreset, setLastAppliedPreset
    ]);

    // 更新轴标签配置
    const handleAxisLabelChange = (axis: 'x' | 'y', key: string, value: any) => {
        if (axis === 'x') {
            const newXAxisLabel = {
                ...xAxisLabel,
                [key]: value
            };
            setXAxisLabel(newXAxisLabel);
            console.log('更新X轴标签配置:', newXAxisLabel);
            onChange({
                xAxisLabel: newXAxisLabel,
                yAxisLabel: yAxisLabel,
                xAxisLine, yAxisLine,
                xAxisTick, yAxisTick,
                xSplitLine, ySplitLine,
                xAxisName, yAxisName,
                xAxisGeneral, yAxisGeneral
            });
        } else {
            const newYAxisLabel = {
                ...yAxisLabel,
                [key]: value
            };
            setYAxisLabel(newYAxisLabel);
            console.log('更新Y轴标签配置:', newYAxisLabel);
            onChange({
                xAxisLabel: xAxisLabel,
                yAxisLabel: newYAxisLabel,
                xAxisLine, yAxisLine,
                xAxisTick, yAxisTick,
                xSplitLine, ySplitLine,
                xAxisName, yAxisName,
                xAxisGeneral, yAxisGeneral
            });
        }
    };

    // 更新轴线配置
    const handleAxisLineChange = (axis: 'x' | 'y', key: string, value: any) => {
        if (axis === 'x') {
            let newXAxisLine;
            if (key.includes('.')) {
                // 处理嵌套属性，如 lineStyle.color
                const [parent, child] = key.split('.');
                newXAxisLine = {
                    ...xAxisLine,
                    [parent]: {
                        ...xAxisLine[parent as keyof AxisLineConfig] as object,
                        [child]: value
                    }
                };
            } else {
                newXAxisLine = {
                    ...xAxisLine,
                    [key]: value
                };
            }
            setXAxisLine(newXAxisLine);
            onChange({
                xAxisLabel, yAxisLabel,
                xAxisLine: newXAxisLine, yAxisLine,
                xAxisTick, yAxisTick,
                xSplitLine, ySplitLine,
                xAxisName, yAxisName,
                xAxisGeneral, yAxisGeneral
            });
        } else {
            let newYAxisLine;
            if (key.includes('.')) {
                const [parent, child] = key.split('.');
                newYAxisLine = {
                    ...yAxisLine,
                    [parent]: {
                        ...yAxisLine[parent as keyof AxisLineConfig] as object,
                        [child]: value
                    }
                };
            } else {
                newYAxisLine = {
                    ...yAxisLine,
                    [key]: value
                };
            }
            setYAxisLine(newYAxisLine);
            onChange({
                xAxisLabel, yAxisLabel,
                xAxisLine, yAxisLine: newYAxisLine,
                xAxisTick, yAxisTick,
                xSplitLine, ySplitLine,
                xAxisName, yAxisName,
                xAxisGeneral, yAxisGeneral
            });
        }
    };

    // 更新刻度线配置
    const handleAxisTickChange = (axis: 'x' | 'y', key: string, value: any) => {
        if (axis === 'x') {
            let newXAxisTick;
            if (key.includes('.')) {
                const [parent, child] = key.split('.');
                newXAxisTick = {
                    ...xAxisTick,
                    [parent]: {
                        ...xAxisTick[parent as keyof AxisTickConfig] as object,
                        [child]: value
                    }
                };
            } else {
                newXAxisTick = {
                    ...xAxisTick,
                    [key]: value
                };
            }
            setXAxisTick(newXAxisTick);
            onChange({
                xAxisLabel, yAxisLabel,
                xAxisLine, yAxisLine,
                xAxisTick: newXAxisTick, yAxisTick,
                xSplitLine, ySplitLine,
                xAxisName, yAxisName,
                xAxisGeneral, yAxisGeneral
            });
        } else {
            let newYAxisTick;
            if (key.includes('.')) {
                const [parent, child] = key.split('.');
                newYAxisTick = {
                    ...yAxisTick,
                    [parent]: {
                        ...yAxisTick[parent as keyof AxisTickConfig] as object,
                        [child]: value
                    }
                };
            } else {
                newYAxisTick = {
                    ...yAxisTick,
                    [key]: value
                };
            }
            setYAxisTick(newYAxisTick);
            onChange({
                xAxisLabel, yAxisLabel,
                xAxisLine, yAxisLine,
                xAxisTick, yAxisTick: newYAxisTick,
                xSplitLine, ySplitLine,
                xAxisName, yAxisName,
                xAxisGeneral, yAxisGeneral
            });
        }
    };

    // 更新分割线配置
    const handleSplitLineChange = (axis: 'x' | 'y', key: string, value: any) => {
        if (axis === 'x') {
            let newXSplitLine;
            if (key.includes('.')) {
                const [parent, child] = key.split('.');
                newXSplitLine = {
                    ...xSplitLine,
                    [parent]: {
                        ...xSplitLine[parent as keyof SplitLineConfig] as object,
                        [child]: value
                    }
                };
            } else {
                newXSplitLine = {
                    ...xSplitLine,
                    [key]: value
                };
            }
            setXSplitLine(newXSplitLine);
            onChange({
                xAxisLabel, yAxisLabel,
                xAxisLine, yAxisLine,
                xAxisTick, yAxisTick,
                xSplitLine: newXSplitLine, ySplitLine,
                xAxisName, yAxisName,
                xAxisGeneral, yAxisGeneral
            });
        } else {
            let newYSplitLine;
            if (key.includes('.')) {
                const [parent, child] = key.split('.');
                newYSplitLine = {
                    ...ySplitLine,
                    [parent]: {
                        ...ySplitLine[parent as keyof SplitLineConfig] as object,
                        [child]: value
                    }
                };
            } else {
                newYSplitLine = {
                    ...ySplitLine,
                    [key]: value
                };
            }
            setYSplitLine(newYSplitLine);
            onChange({
                xAxisLabel, yAxisLabel,
                xAxisLine, yAxisLine,
                xAxisTick, yAxisTick,
                xSplitLine, ySplitLine: newYSplitLine,
                xAxisName, yAxisName,
                xAxisGeneral, yAxisGeneral
            });
        }
    };

    // 更新坐标轴名称配置
    const handleAxisNameChange = (axis: 'x' | 'y', key: string, value: any) => {

        if (axis === 'x') {
            let newXAxisName;
            if (key.includes('.')) {
                const [parent, child] = key.split('.');
                newXAxisName = {
                    ...xAxisName,
                    [parent]: {
                        ...xAxisName[parent as keyof AxisNameConfig] as object,
                        [child]: value
                    }
                };
            } else {
                // 确保布尔值正确处理，保留false值
                const processedValue = key === 'show' ? value === true : value;
                newXAxisName = {
                    ...xAxisName,
                    [key]: processedValue
                };
            }
            setXAxisName(newXAxisName);
            onChange({
                xAxisLabel, yAxisLabel,
                xAxisLine, yAxisLine,
                xAxisTick, yAxisTick,
                xSplitLine, ySplitLine,
                xAxisName: newXAxisName, yAxisName,
                xAxisGeneral, yAxisGeneral
            });
        } else {
            let newYAxisName;
            if (key.includes('.')) {
                const [parent, child] = key.split('.');
                newYAxisName = {
                    ...yAxisName,
                    [parent]: {
                        ...yAxisName[parent as keyof AxisNameConfig] as object,
                        [child]: value
                    }
                };
            } else {
                // 确保布尔值正确处理，保留false值
                const processedValue = key === 'show' ? value === true : value;
                newYAxisName = {
                    ...yAxisName,
                    [key]: processedValue
                };
            }
            setYAxisName(newYAxisName);
            onChange({
                xAxisLabel, yAxisLabel,
                xAxisLine, yAxisLine,
                xAxisTick, yAxisTick,
                xSplitLine, ySplitLine,
                xAxisName, yAxisName: newYAxisName,
                xAxisGeneral, yAxisGeneral
            });
        }
    };

    // 导出当前配置
    const handleExportConfig = () => {
        try {
            // 构建完整的坐标轴配置对象
            const fullConfig = {
                xAxis: {
                    // 通用配置
                    type: xAxisGeneral.type || 'category',
                    position: xAxisGeneral.position || 'bottom',
                    inverse: xAxisGeneral.inverse || false,
                    scale: xAxisGeneral.scale || false,
                    min: xAxisGeneral.min,
                    max: xAxisGeneral.max,

                    // 轴标签配置
                    axisLabel: xAxisLabel,

                    // 轴线配置
                    axisLine: xAxisLine,

                    // 刻度线配置
                    axisTick: xAxisTick,

                    // 分割线配置
                    splitLine: xSplitLine,

                    // 轴名称配置
                    name: xAxisName.show ? xAxisName.text : undefined,
                    nameLocation: xAxisName.show ? xAxisName.location : undefined,
                    nameTextStyle: xAxisName.show ? xAxisName.textStyle : undefined,
                    show: true // 默认显示坐标轴
                },
                yAxis: {
                    // 通用配置
                    type: yAxisGeneral.type || 'value',
                    position: yAxisGeneral.position || 'left',
                    inverse: yAxisGeneral.inverse || false,
                    scale: yAxisGeneral.scale || false,
                    min: yAxisGeneral.min,
                    max: yAxisGeneral.max,

                    // 轴标签配置
                    axisLabel: yAxisLabel,

                    // 轴线配置
                    axisLine: yAxisLine,

                    // 刻度线配置
                    axisTick: yAxisTick,

                    // 分割线配置
                    splitLine: ySplitLine,

                    // 轴名称配置
                    name: yAxisName.show ? yAxisName.text : undefined,
                    nameLocation: yAxisName.show ? yAxisName.location : undefined,
                    nameTextStyle: yAxisName.show ? yAxisName.textStyle : undefined,
                    show: true // 默认显示坐标轴
                }
            };

            const configJson = JSON.stringify(fullConfig, null, 2);
            navigator.clipboard.writeText(configJson);
            message.success('完整坐标轴配置已复制到剪贴板');
        } catch (e) {
            message.error('导出配置失败');
        }
    };

    // 渲染基本配置
    const renderBasicConfig = (axis: 'x' | 'y') => {
        const axisLabel = axis === 'x' ? xAxisLabel : yAxisLabel;
        const handleLabelChange = (key: string, value: any) => {
            handleAxisLabelChange(axis, key, value);
        };

        return (
            <Form layout="vertical" size="small">
                <Row gutter={[16, 0]}>
                    <Col span={24}>
                        <Form.Item style={{ marginBottom: 12 }}>
                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                                <Typography.Text>显示{axis === 'x' ? 'X' : 'Y'}轴标签</Typography.Text>
                                <Switch
                                    checked={Boolean(axisLabel.show)}
                                    onChange={(checked) => handleLabelChange('show', checked)}
                                    size="small"
                                />
                            </div>
                        </Form.Item>
                    </Col>
                </Row>

                {Boolean(axisLabel.show) && (
                    <>
                        <Row gutter={[16, 0]}>
                            <Col span={12}>
                                <Form.Item label="水平位置" style={{ marginBottom: 12 }}>
                                    <Select
                                        size="small"
                                        style={{ width: '100%' }}
                                        value={axisLabel.align || (axis === 'x' ? 'center' : 'right')}
                                        onChange={(value) => handleLabelChange('align', value)}
                                        options={[
                                            { value: 'left', label: '居左' },
                                            { value: 'center', label: '居中' },
                                            { value: 'right', label: '居右' }
                                        ]}
                                    />
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="旋转方向" style={{ marginBottom: 12 }}>
                                    <Select
                                        size="small"
                                        style={{ width: '100%' }}
                                        value={axisLabel.rotate !== undefined ? (axisLabel.rotate > 0 ? 'clockwise' : (axisLabel.rotate < 0 ? 'counterclockwise' : 'normal')) : 'normal'}
                                        onChange={(value) => {
                                            let rotate = 0;
                                            if (value === 'clockwise') rotate = 45;
                                            else if (value === 'counterclockwise') rotate = -45;
                                            handleLabelChange('rotate', rotate);
                                        }}
                                        options={[
                                            { value: 'normal', label: '水平' },
                                            { value: 'clockwise', label: '顺时针' },
                                            { value: 'counterclockwise', label: '逆时针' }
                                        ]}
                                    />
                                </Form.Item>
                            </Col>
                        </Row>

                        <Form.Item label="旋转角度" style={{ marginBottom: 12 }}>
                            <InputNumber
                                min={-90}
                                max={90}
                                size="small"
                                value={axisLabel.rotate || 0}
                                onChange={(value) => handleLabelChange('rotate', handleNumberValue(value, DEFAULT_VALUES.rotate))}
                                addonAfter="°"
                                style={{ width: '100%' }}
                            />
                        </Form.Item>

                        <Form.Item label="格式化" style={{ marginBottom: 12 }}>
                            <Input
                                size="small"
                                placeholder={axis === 'x' ? "例如：{value}月" : "例如：{value}%"}
                                value={typeof axisLabel.formatter === 'string' ? axisLabel.formatter : ''}
                                onChange={(e) => handleLabelChange('formatter', e.target.value)}
                            />
                        </Form.Item>
                    </>
                )}
            </Form>
        );
    };

    // 渲染文字样式配置
    const renderTextStyleConfig = (axis: 'x' | 'y') => {
        const axisLabel = axis === 'x' ? xAxisLabel : yAxisLabel;
        const handleLabelChange = (key: string, value: any) => {
            handleAxisLabelChange(axis, key, value);
        };

        return (
            <Form layout="vertical" size="small">
                {Boolean(axisLabel.show) && (
                    <>
                        <Row gutter={[16, 0]}>
                            <Col span={12}>
                                <Form.Item label="文字颜色" style={{ marginBottom: 12 }}>
                                    <div style={{ display: 'flex', alignItems: 'center' }}>
                                        <Input
                                            type="color"
                                            value={axisLabel.color || '#333333'}
                                            onChange={(e) => handleLabelChange('color', e.target.value)}
                                            size="small"
                                            style={{ width: '100%' }}
                                        />
                                        <div
                                            style={{
                                                width: 20,
                                                height: 20,
                                                marginLeft: 8,
                                                backgroundColor: axisLabel.color || '#333333',
                                                border: '1px solid #d9d9d9',
                                                borderRadius: 4
                                            }}
                                        />
                                    </div>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="字号" style={{ marginBottom: 12 }}>
                                    <InputNumber
                                        min={8}
                                        max={24}
                                        size="small"
                                        value={axisLabel.fontSize || DEFAULT_VALUES.fontSize}
                                        onChange={(value) => handleLabelChange('fontSize', handleNumberValue(value, DEFAULT_VALUES.fontSize))}
                                        addonAfter="px"
                                        style={{ width: '100%' }}
                                    />
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row gutter={[16, 0]}>
                            <Col span={12}>
                                <Form.Item label="字体粗细" style={{ marginBottom: 12 }}>
                                    <Select
                                        size="small"
                                        style={{ width: '100%' }}
                                        value={axisLabel.fontWeight || 'normal'}
                                        onChange={(value) => handleLabelChange('fontWeight', value)}
                                        options={[
                                            { value: 'normal', label: '正常' },
                                            { value: 'bold', label: '粗体' },
                                            { value: 'bolder', label: '特粗' },
                                            { value: 'lighter', label: '细体' }
                                        ]}
                                    />
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="内边距" style={{ marginBottom: 12 }}>
                                    <InputNumber
                                        size="small"
                                        min={0}
                                        max={20}
                                        value={typeof axisLabel.padding === 'number' ? axisLabel.padding : 0}
                                        placeholder="像素值"
                                        style={{ width: '100%' }}
                                        onChange={(value) => handleLabelChange('padding', value)}
                                    />
                                </Form.Item>
                            </Col>
                        </Row>
                    </>
                )}
                {!axisLabel.show && (
                    <div style={{ padding: '20px 0', textAlign: 'center', color: '#999' }}>
                        请先启用{axis === 'x' ? 'X' : 'Y'}轴标签
                    </div>
                )}
            </Form>
        );
    };

    // 渲染高级配置
    const renderAdvancedConfig = (axis: 'x' | 'y') => {
        // 获取相应轴的配置
        const axisGeneral = axis === 'x' ? xAxisGeneral : yAxisGeneral;

        const handleLabelChange = (key: string, value: any) => {
            handleAxisLabelChange(axis, key, value);
        };

        const handleGeneralChange = (key: string, value: any) => {
            if (axis === 'x') {
                const newXAxisGeneral = {
                    ...xAxisGeneral,
                    [key]: value
                };
                setXAxisGeneral(newXAxisGeneral);
                onChange({
                    xAxisLabel, yAxisLabel,
                    xAxisLine, yAxisLine,
                    xAxisTick, yAxisTick,
                    xSplitLine, ySplitLine,
                    xAxisName, yAxisName,
                    xAxisGeneral: newXAxisGeneral, yAxisGeneral
                });
            } else {
                const newYAxisGeneral = {
                    ...yAxisGeneral,
                    [key]: value
                };
                setYAxisGeneral(newYAxisGeneral);
                onChange({
                    xAxisLabel, yAxisLabel,
                    xAxisLine, yAxisLine,
                    xAxisTick, yAxisTick,
                    xSplitLine, ySplitLine,
                    xAxisName, yAxisName,
                    xAxisGeneral, yAxisGeneral: newYAxisGeneral
                });
            }
        };

        return (
            <div style={{ marginBottom: 16 }}>
                <Typography.Title level={5}>高级配置</Typography.Title>

                <Form layout="vertical">
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item label="类型">
                                <Select
                                    value={axisGeneral.type}
                                    onChange={(value) => handleGeneralChange('type', value)}
                                >
                                    <Select.Option value="category">类别轴</Select.Option>
                                    <Select.Option value="value">数值轴</Select.Option>
                                    <Select.Option value="time">时间轴</Select.Option>
                                    <Select.Option value="log">对数轴</Select.Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="位置">
                                <Select
                                    value={axisGeneral.position}
                                    onChange={(value) => handleGeneralChange('position', value)}
                                >
                                    {axis === 'x' ? (
                                        <>
                                            <Select.Option value="top">顶部</Select.Option>
                                            <Select.Option value="bottom">底部</Select.Option>
                                        </>
                                    ) : (
                                        <>
                                            <Select.Option value="left">左侧</Select.Option>
                                            <Select.Option value="right">右侧</Select.Option>
                                        </>
                                    )}
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>

                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item label="最小值" tooltip="可以设置为具体数值、'dataMin'（取数据最小值）或不设置">
                                <Input
                                    value={axisGeneral.min !== undefined ? String(axisGeneral.min) : ''}
                                    onChange={(e) => handleGeneralChange('min', convertMinMax(e.target.value))}
                                    placeholder="不设置或 dataMin"
                                />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="最大值" tooltip="可以设置为具体数值、'dataMax'（取数据最大值）或不设置">
                                <Input
                                    value={axisGeneral.max !== undefined ? String(axisGeneral.max) : ''}
                                    onChange={(e) => handleGeneralChange('max', convertMinMax(e.target.value))}
                                    placeholder="不设置或 dataMax"
                                />
                            </Form.Item>
                        </Col>
                    </Row>

                    <Form.Item
                        label="坐标轴数据"
                        tooltip="自定义坐标轴数据，多个值用逗号分隔。此设置会覆盖自动生成的数据。"
                    >
                        <Input.TextArea
                            value={axisGeneral.data ? Array.isArray(axisGeneral.data) ? axisGeneral.data.join(',') : String(axisGeneral.data) : ''}
                            onChange={(e) => {
                                const dataArray = e.target.value.split(',').map(item => item.trim());
                                handleGeneralChange('data', dataArray.length > 0 ? dataArray : undefined);
                            }}
                            placeholder="例如: 一月,二月,三月,四月"
                            autoSize={{ minRows: 2, maxRows: 4 }}
                        />
                    </Form.Item>

                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item label="反向">
                                <Switch
                                    checked={axisGeneral.inverse}
                                    onChange={(checked) => handleGeneralChange('inverse', checked)}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="刻度范围" tooltip="如果为 true，表示不包含0刻度，刻度起始将由数据决定">
                                <Switch
                                    checked={axisGeneral.scale}
                                    onChange={(checked) => handleGeneralChange('scale', checked)}
                                />
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </div>
        );
    };

    // 预设面板内容 - 参考图例设计
    const presetsContent = (
        <div style={{ width: 550, maxHeight: 450, overflow: 'auto' }}>
            <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                padding: '0 0 8px 0'
            }}>
                <Typography.Title level={5} style={{ margin: 0 }}>坐标轴预设样式</Typography.Title>
                <Space>
                    <Button
                        type="primary"
                        size="small"
                        icon={<SaveOutlined />}
                        onClick={() => setShowPresetModal(true)}
                    >
                        保存为预设
                    </Button>
                </Space>
            </div>

            <div style={{
                background: '#f5f5f5',
                padding: '8px',
                borderRadius: '4px',
                marginBottom: '12px'
            }}>
                <Typography.Text type="secondary" style={{ fontSize: '12px' }}>
                    选择预设样式快速应用到当前坐标轴，或保存当前配置创建自定义预设
                </Typography.Text>
            </div>

            <Row gutter={[12, 12]}>
                {allPresets.map((preset) => (
                    <Col span={8} key={preset.name}>
                        <div
                            style={{
                                border: lastAppliedPreset === preset.name
                                    ? '2px solid #1890ff'
                                    : '1px solid #d9d9d9',
                                borderRadius: 4,
                                padding: 10,
                                cursor: 'pointer',
                                backgroundColor: lastAppliedPreset === preset.name ? '#e6f7ff' : '#fff',
                                position: 'relative',
                                height: '100%',
                                transition: 'all 0.3s'
                            }}
                            onClick={() => {
                                applyPreset(preset.config);
                                setLastAppliedPreset(preset.name);
                                message.success(`已应用"${preset.name}"预设`);
                            }}
                        >
                            <div style={{
                                display: 'flex',
                                justifyContent: 'space-between',
                                alignItems: 'center',
                                marginBottom: 8
                            }}>
                                <Typography.Text strong ellipsis>
                                    {preset.name}
                                </Typography.Text>
                                {!preset.isDefault && (
                                    <Button
                                        type="text"
                                        size="small"
                                        icon={<DeleteOutlined />}
                                        style={{ padding: 0 }}
                                        onClick={(e) => {
                                            e.stopPropagation();
                                            deletePreset(preset.name);
                                        }}
                                    />
                                )}
                            </div>

                            {/* 预设示例 - 模拟预览 */}
                            <div style={{
                                height: 60,
                                position: 'relative',
                                border: '1px solid #eee',
                                borderRadius: 4,
                                padding: 4,
                                background: preset.config.xAxis.axisLine?.lineStyle?.color === '#eee' ? '#333' : '#fff'
                            }}>
                                {/* X轴名称 */}
                                {preset.config.xAxis.nameShow && (
                                    <div style={{
                                        position: 'absolute',
                                        bottom: -5,
                                        right: 0,
                                        fontSize: '10px',
                                        color: preset.config.xAxis.nameTextStyle?.color || '#666',
                                        fontWeight: preset.config.xAxis.nameTextStyle?.fontWeight || 'normal'
                                    }}>
                                        {preset.config.xAxis.name || 'X轴'}
                                    </div>
                                )}

                                {/* Y轴名称 */}
                                {preset.config.yAxis.nameShow && (
                                    <div style={{
                                        position: 'absolute',
                                        top: 0,
                                        left: -5,
                                        fontSize: '10px',
                                        color: preset.config.yAxis.nameTextStyle?.color || '#666',
                                        fontWeight: preset.config.yAxis.nameTextStyle?.fontWeight || 'normal',
                                        transform: 'rotate(-90deg)',
                                        transformOrigin: 'left bottom'
                                    }}>
                                        {preset.config.yAxis.name || 'Y轴'}
                                    </div>
                                )}

                                {/* X轴线 */}
                                {preset.config.xAxis.axisLine?.show !== false && (
                                    <div style={{
                                        position: 'absolute',
                                        bottom: 0,
                                        left: 10,
                                        right: 5,
                                        height: 1,
                                        borderTop: `${preset.config.xAxis.axisLine?.lineStyle?.width || 1}px ${preset.config.xAxis.axisLine?.lineStyle?.type || 'solid'} ${typeof preset.config.xAxis.axisLine?.lineStyle?.color === 'string' ? preset.config.xAxis.axisLine?.lineStyle?.color : '#333'}`
                                    }}></div>
                                )}

                                {/* Y轴线 */}
                                {preset.config.yAxis.axisLine?.show !== false && (
                                    <div style={{
                                        position: 'absolute',
                                        top: 5,
                                        bottom: 0,
                                        left: 10,
                                        width: 1,
                                        borderLeft: `${preset.config.yAxis.axisLine?.lineStyle?.width || 1}px ${preset.config.yAxis.axisLine?.lineStyle?.type || 'solid'} ${typeof preset.config.yAxis.axisLine?.lineStyle?.color === 'string' ? preset.config.yAxis.axisLine?.lineStyle?.color : '#333'}`
                                    }}></div>
                                )}

                                {/* X轴标签示例 */}
                                {preset.config.xAxis.axisLabel?.show !== false && (
                                    <div style={{
                                        position: 'absolute',
                                        bottom: 5,
                                        left: 10,
                                        right: 5,
                                        display: 'flex',
                                        justifyContent: 'space-between',
                                        fontSize: `${preset.config.xAxis.axisLabel?.fontSize ? Math.min(9, preset.config.xAxis.axisLabel.fontSize / 1.5) : 8}px`,
                                        color: preset.config.xAxis.axisLabel?.color || '#333',
                                        transform: preset.config.xAxis.axisLabel?.rotate ? `translateY(8px) rotate(${Math.min(preset.config.xAxis.axisLabel.rotate, 15)}deg)` : 'none',
                                        transformOrigin: 'center bottom',
                                        fontWeight: preset.config.xAxis.axisLabel?.fontWeight || 'normal',
                                    }}>
                                        <span>A</span>
                                        <span>B</span>
                                        <span>C</span>
                                    </div>
                                )}

                                {/* Y轴标签示例 */}
                                {preset.config.yAxis.axisLabel?.show !== false && (
                                    <div style={{
                                        position: 'absolute',
                                        top: 5,
                                        bottom: 10,
                                        left: 15,
                                        display: 'flex',
                                        flexDirection: 'column',
                                        justifyContent: 'space-between',
                                        fontSize: `${preset.config.yAxis.axisLabel?.fontSize ? Math.min(9, preset.config.yAxis.axisLabel.fontSize / 1.5) : 8}px`,
                                        color: preset.config.yAxis.axisLabel?.color || '#333',
                                        fontWeight: preset.config.yAxis.axisLabel?.fontWeight || 'normal'
                                    }}>
                                        <span>100</span>
                                        <span>50</span>
                                        <span>0</span>
                                    </div>
                                )}

                                {/* Y轴分割线示例 */}
                                {preset.config.yAxis.splitLine?.show && (
                                    <div style={{
                                        position: 'absolute',
                                        top: '50%',
                                        left: 10,
                                        right: 5,
                                        borderTop: `1px ${preset.config.yAxis.splitLine.lineStyle?.type || 'dashed'} ${preset.config.yAxis.splitLine.lineStyle?.color || '#E0E0E0'}`
                                    }}></div>
                                )}

                                {/* 数据图形 */}
                                <div style={{
                                    position: 'absolute',
                                    bottom: 15,
                                    left: 25,
                                    right: 15,
                                    height: 20,
                                    display: 'flex',
                                    alignItems: 'flex-end',
                                    gap: 4
                                }}>
                                    <div style={{ width: '20%', height: '60%', backgroundColor: '#5470c6' }}></div>
                                    <div style={{ width: '20%', height: '90%', backgroundColor: '#5470c6' }}></div>
                                    <div style={{ width: '20%', height: '40%', backgroundColor: '#5470c6' }}></div>
                                </div>
                            </div>

                            {lastAppliedPreset === preset.name && (
                                <div style={{
                                    position: 'absolute',
                                    right: -8,
                                    top: -8,
                                    width: 18,
                                    height: 18,
                                    borderRadius: '50%',
                                    background: '#1890ff',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    color: '#fff',
                                    fontSize: 12,
                                    fontWeight: 'bold'
                                }}>✓</div>
                            )}
                        </div>
                    </Col>
                ))}
            </Row>
        </div>
    );

    // 增强预览渲染
    const renderPreview = () => {

        return (
            <div style={{
                position: 'relative',
                height: '100%',
                width: '100%',
                overflow: 'hidden',
                background: '#fff',
                borderRadius: 4,
                boxShadow: 'inset 0 0 0 1px #f0f0f0'
            }}>
                {/* 图表区域 */}
                <div style={{ position: 'absolute', top: 15, left: 40, right: 15, bottom: 30 }}>
                    {/* X轴名称 - 强制转换确保正确评估 */}
                    {Boolean(xAxisName.show) === true && (
                        <div style={{
                            position: 'absolute',
                            bottom: -25,
                            left: xAxisName.location === 'start' ? 0 : (xAxisName.location === 'end' ? 'auto' : '50%'),
                            right: xAxisName.location === 'end' ? 0 : 'auto',
                            transform: xAxisName.location === 'middle' ? 'translateX(-50%)' : 'none',
                            textAlign: xAxisName.location === 'start' ? 'left' : (xAxisName.location === 'end' ? 'right' : 'center'),
                            fontSize: `${xAxisName.textStyle?.fontSize || 12}px`,
                            color: xAxisName.textStyle?.color || '#333',
                            fontWeight: xAxisName.textStyle?.fontWeight || 'normal'
                        }}>
                            {xAxisName.text || 'X轴'}
                        </div>
                    )}

                    {/* Y轴名称 - 强制转换确保正确评估 */}
                    {Boolean(yAxisName.show) === true && (
                        <div style={{
                            position: 'absolute',
                            top: yAxisName.location === 'start' ? 0 : (yAxisName.location === 'end' ? 'auto' : '50%'),
                            bottom: yAxisName.location === 'end' ? 0 : 'auto',
                            left: -35,
                            transform: yAxisName.location === 'middle' ? 'translateY(-50%) rotate(-90deg)' : 'rotate(-90deg)',
                            transformOrigin: yAxisName.location === 'start' ? 'left bottom' : (yAxisName.location === 'end' ? 'right top' : 'left top'),
                            fontSize: `${yAxisName.textStyle?.fontSize || 12}px`,
                            color: yAxisName.textStyle?.color || '#333',
                            fontWeight: yAxisName.textStyle?.fontWeight || 'normal',
                            whiteSpace: 'nowrap'
                        }}>
                            {yAxisName.text || 'Y轴'}
                        </div>
                    )}

                    {/* X轴线 */}
                    {Boolean(xAxisLine.show) && (
                        <div style={{
                            position: 'absolute',
                            bottom: -1,
                            left: 0,
                            right: 0,
                            height: xAxisLine.lineStyle?.width || 1,
                            borderTop: `${xAxisLine.lineStyle?.width || 1}px ${xAxisLine.lineStyle?.type || 'solid'} ${typeof xAxisLine.lineStyle?.color === 'string' ? xAxisLine.lineStyle.color : '#333'}`
                        }}></div>
                    )}

                    {/* Y轴线 */}
                    {Boolean(yAxisLine.show) && (
                        <div style={{
                            position: 'absolute',
                            top: 0,
                            bottom: 0,
                            left: -1,
                            width: yAxisLine.lineStyle?.width || 1,
                            borderRight: `${yAxisLine.lineStyle?.width || 1}px ${yAxisLine.lineStyle?.type || 'solid'} ${typeof yAxisLine.lineStyle?.color === 'string' ? yAxisLine.lineStyle.color : '#333'}`
                        }}></div>
                    )}

                    {/* X轴刻度线 */}
                    {Boolean(xAxisTick.show) && (
                        <div style={{ position: 'absolute', bottom: -1, left: 0, right: 0 }}>
                            {[0, 25, 50, 75, 100].map((pos, idx) => (
                                <div key={idx} style={{
                                    position: 'absolute',
                                    bottom: 0,
                                    left: `${pos}%`,
                                    width: xAxisTick.lineStyle?.width || 1,
                                    height: xAxisTick.length || 5,
                                    backgroundColor: typeof xAxisTick.lineStyle?.color === 'string' ? xAxisTick.lineStyle.color : '#333'
                                }}></div>
                            ))}
                        </div>
                    )}

                    {/* Y轴刻度线 */}
                    {Boolean(yAxisTick.show) && (
                        <div style={{ position: 'absolute', top: 0, bottom: 0, left: -1 }}>
                            {[0, 33, 66, 100].map((pos, idx) => (
                                <div key={idx} style={{
                                    position: 'absolute',
                                    top: `${100 - pos}%`,
                                    left: 0,
                                    height: yAxisTick.lineStyle?.width || 1,
                                    width: yAxisTick.length || 5,
                                    backgroundColor: typeof yAxisTick.lineStyle?.color === 'string' ? yAxisTick.lineStyle.color : '#333'
                                }}></div>
                            ))}
                        </div>
                    )}

                    {/* X轴分割线 */}
                    {Boolean(xSplitLine.show) && (
                        <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}>
                            {[25, 50, 75].map((pos, idx) => (
                                <div key={idx} style={{
                                    position: 'absolute',
                                    top: 0,
                                    bottom: 0,
                                    left: `${pos}%`,
                                    width: xSplitLine.lineStyle?.width || 1,
                                    borderLeft: `${xSplitLine.lineStyle?.width || 1}px ${xSplitLine.lineStyle?.type || 'dashed'} ${typeof xSplitLine.lineStyle?.color === 'string' ? xSplitLine.lineStyle.color : '#E0E0E0'}`
                                }}></div>
                            ))}
                        </div>
                    )}

                    {/* Y轴分割线 */}
                    {Boolean(ySplitLine.show) && (
                        <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}>
                            {[33, 66].map((pos, idx) => (
                                <div key={idx} style={{
                                    position: 'absolute',
                                    top: `${pos}%`,
                                    left: 0,
                                    right: 0,
                                    height: ySplitLine.lineStyle?.width || 1,
                                    borderTop: `${ySplitLine.lineStyle?.width || 1}px ${ySplitLine.lineStyle?.type || 'dashed'} ${typeof ySplitLine.lineStyle?.color === 'string' ? ySplitLine.lineStyle.color : '#E0E0E0'}`
                                }}></div>
                            ))}
                        </div>
                    )}

                    {/* X轴标签 */}
                    {Boolean(xAxisLabel.show) && (
                        <div style={{
                            position: 'absolute',
                            bottom: -1,
                            left: 0,
                            right: 0
                        }}>
                            <div style={{
                                position: 'absolute',
                                top: 5,
                                left: 0,
                                right: 0,
                                display: 'flex',
                                justifyContent: xAxisLabel.align === 'left' ? 'flex-start' : (xAxisLabel.align === 'right' ? 'flex-end' : 'space-between'),
                                fontSize: `${xAxisLabel.fontSize || 12}px`,
                                color: xAxisLabel.color || '#333',
                                transform: xAxisLabel.rotate ? `translateY(8px) rotate(${xAxisLabel.rotate}deg)` : 'none',
                                transformOrigin: 'left center',
                                fontWeight: xAxisLabel.fontWeight || 'normal'
                            }}>
                                <span style={{ marginRight: 30 }}>类别1</span>
                                <span style={{ marginRight: 30 }}>类别2</span>
                                <span style={{ marginRight: 30 }}>类别3</span>
                                <span>类别4</span>
                            </div>
                        </div>
                    )}

                    {/* Y轴标签 */}
                    {Boolean(yAxisLabel.show) && (
                        <div style={{
                            position: 'absolute',
                            top: 0,
                            bottom: 0,
                            left: -1
                        }}>
                            <div style={{
                                position: 'absolute',
                                top: 0,
                                bottom: 0,
                                right: 5,
                                display: 'flex',
                                flexDirection: 'column',
                                justifyContent: 'space-between',
                                alignItems: yAxisLabel.align === 'left' ? 'flex-start' : (yAxisLabel.align === 'right' ? 'flex-end' : 'center'),
                                fontSize: `${yAxisLabel.fontSize || 12}px`,
                                color: yAxisLabel.color || '#333',
                                fontWeight: yAxisLabel.fontWeight || 'normal'
                            }}>
                                <span>100</span>
                                <span>50</span>
                                <span>0</span>
                            </div>
                        </div>
                    )}

                    {/* 数据柱图 */}
                    <div style={{
                        position: 'absolute',
                        bottom: 0,
                        left: '10%',
                        width: '10%',
                        height: '60%',
                        backgroundColor: '#5470c6'
                    }}></div>
                    <div style={{
                        position: 'absolute',
                        bottom: 0,
                        left: '35%',
                        width: '10%',
                        height: '90%',
                        backgroundColor: '#5470c6'
                    }}></div>
                    <div style={{
                        position: 'absolute',
                        bottom: 0,
                        left: '60%',
                        width: '10%',
                        height: '40%',
                        backgroundColor: '#5470c6'
                    }}></div>
                    <div style={{
                        position: 'absolute',
                        bottom: 0,
                        left: '85%',
                        width: '10%',
                        height: '25%',
                        backgroundColor: '#5470c6'
                    }}></div>
                </div>

                {/* 图例 */}
                <div style={{
                    position: 'absolute',
                    top: 5,
                    left: '50%',
                    transform: 'translateX(-50%)',
                    display: 'flex',
                    alignItems: 'center'
                }}>
                    <div style={{ display: 'flex', alignItems: 'center', marginRight: 8 }}>
                        <div style={{ width: 10, height: 10, backgroundColor: '#5470c6', marginRight: 4 }}></div>
                        <span style={{ fontSize: 12 }}>系列1</span>
                    </div>
                </div>
            </div>
        );
    };

    // 渲染轴线配置
    const renderAxisLineConfig = (axis: 'x' | 'y') => {
        const axisLine = axis === 'x' ? xAxisLine : yAxisLine;
        const handleLineChange = (key: string, value: any) => {
            handleAxisLineChange(axis, key, value);
        };

        return (
            <Form layout="vertical" size="small">
                <Form.Item style={{ marginBottom: 12 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <Typography.Text>显示{axis === 'x' ? 'X' : 'Y'}轴线</Typography.Text>
                        <Switch
                            checked={Boolean(axisLine.show)}
                            onChange={(checked) => handleLineChange('show', checked)}
                            size="small"
                        />
                    </div>
                </Form.Item>

                {Boolean(axisLine.show) && (
                    <>
                        <Row gutter={[16, 0]}>
                            <Col span={12}>
                                <Form.Item label="线条颜色" style={{ marginBottom: 12 }}>
                                    <div style={{ display: 'flex', alignItems: 'center' }}>
                                        <Input
                                            type="color"
                                            value={axisLine.lineStyle?.color || '#333'}
                                            onChange={(e) => handleLineChange('lineStyle.color', e.target.value)}
                                            size="small"
                                            style={{ width: '100%' }}
                                        />
                                        <div
                                            style={{
                                                width: 20,
                                                height: 20,
                                                marginLeft: 8,
                                                backgroundColor: typeof axisLine.lineStyle?.color === 'string' ? axisLine.lineStyle?.color : '#333',
                                                border: '1px solid #d9d9d9',
                                                borderRadius: 4
                                            }}
                                        />
                                    </div>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="线宽" style={{ marginBottom: 12 }}>
                                    <InputNumber
                                        min={1}
                                        max={10}
                                        size="small"
                                        value={axisLine.lineStyle?.width || 1}
                                        onChange={(value) => handleLineChange('lineStyle.width', value)}
                                        style={{ width: '100%' }}
                                    />
                                </Form.Item>
                            </Col>
                        </Row>

                        <Form.Item label="线条样式" style={{ marginBottom: 12 }}>
                            <Select
                                size="small"
                                style={{ width: '100%' }}
                                value={axisLine.lineStyle?.type || 'solid'}
                                onChange={(value) => handleLineChange('lineStyle.type', value)}
                                options={[
                                    { value: 'solid', label: '实线' },
                                    { value: 'dashed', label: '虚线' },
                                    { value: 'dotted', label: '点线' }
                                ]}
                            />
                        </Form.Item>
                    </>
                )}
            </Form>
        );
    };

    // 渲染刻度线配置
    const renderAxisTickConfig = (axis: 'x' | 'y') => {
        const axisTick = axis === 'x' ? xAxisTick : yAxisTick;
        const handleTickChange = (key: string, value: any) => {
            handleAxisTickChange(axis, key, value);
        };

        return (
            <Form layout="vertical" size="small">
                <Form.Item style={{ marginBottom: 12 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <Typography.Text>显示刻度线</Typography.Text>
                        <Switch
                            checked={Boolean(axisTick.show)}
                            onChange={(checked) => handleTickChange('show', checked)}
                            size="small"
                        />
                    </div>
                </Form.Item>

                {Boolean(axisTick.show) && (
                    <>
                        <Form.Item label="长度" style={{ marginBottom: 12 }}>
                            <InputNumber
                                min={0}
                                max={20}
                                size="small"
                                value={axisTick.length || 5}
                                onChange={(value) => handleTickChange('length', value)}
                                style={{ width: '100%' }}
                            />
                        </Form.Item>

                        <Row gutter={[16, 0]}>
                            <Col span={12}>
                                <Form.Item label="线条颜色" style={{ marginBottom: 12 }}>
                                    <div style={{ display: 'flex', alignItems: 'center' }}>
                                        <Input
                                            type="color"
                                            value={axisTick.lineStyle?.color || '#333'}
                                            onChange={(e) => handleTickChange('lineStyle.color', e.target.value)}
                                            size="small"
                                            style={{ width: '100%' }}
                                        />
                                        <div
                                            style={{
                                                width: 20,
                                                height: 20,
                                                marginLeft: 8,
                                                backgroundColor: typeof axisTick.lineStyle?.color === 'string' ? axisTick.lineStyle.color : '#333',
                                                border: '1px solid #d9d9d9',
                                                borderRadius: 4
                                            }}
                                        />
                                    </div>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="线宽" style={{ marginBottom: 12 }}>
                                    <InputNumber
                                        min={1}
                                        max={5}
                                        size="small"
                                        value={axisTick.lineStyle?.width || 1}
                                        onChange={(value) => handleTickChange('lineStyle.width', value)}
                                        style={{ width: '100%' }}
                                    />
                                </Form.Item>
                            </Col>
                        </Row>
                    </>
                )}
            </Form>
        );
    };

    // 渲染分割线配置
    const renderSplitLineConfig = (axis: 'x' | 'y') => {
        const splitLine = axis === 'x' ? xSplitLine : ySplitLine;
        const handleSplitChange = (key: string, value: any) => {
            handleSplitLineChange(axis, key, value);
        };

        return (
            <Form layout="vertical" size="small">
                <Form.Item style={{ marginBottom: 12 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <Typography.Text>显示分割线</Typography.Text>
                        <Switch
                            checked={Boolean(splitLine.show)}
                            onChange={(checked) => handleSplitChange('show', checked)}
                            size="small"
                        />
                    </div>
                </Form.Item>

                {Boolean(splitLine.show) && (
                    <>
                        <Row gutter={[16, 0]}>
                            <Col span={12}>
                                <Form.Item label="线条颜色" style={{ marginBottom: 12 }}>
                                    <div style={{ display: 'flex', alignItems: 'center' }}>
                                        <Input
                                            type="color"
                                            value={splitLine.lineStyle?.color || '#E0E0E0'}
                                            onChange={(e) => handleSplitChange('lineStyle.color', e.target.value)}
                                            size="small"
                                            style={{ width: '100%' }}
                                        />
                                        <div
                                            style={{
                                                width: 20,
                                                height: 20,
                                                marginLeft: 8,
                                                backgroundColor: typeof splitLine.lineStyle?.color === 'string' ? splitLine.lineStyle.color : '#E0E0E0',
                                                border: '1px solid #d9d9d9',
                                                borderRadius: 4
                                            }}
                                        />
                                    </div>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="线宽" style={{ marginBottom: 12 }}>
                                    <InputNumber
                                        min={1}
                                        max={5}
                                        size="small"
                                        value={splitLine.lineStyle?.width || 1}
                                        onChange={(value) => handleSplitChange('lineStyle.width', value)}
                                        style={{ width: '100%' }}
                                    />
                                </Form.Item>
                            </Col>
                        </Row>

                        <Form.Item label="线条样式" style={{ marginBottom: 12 }}>
                            <Select
                                size="small"
                                style={{ width: '100%' }}
                                value={splitLine.lineStyle?.type || 'solid'}
                                onChange={(value) => handleSplitChange('lineStyle.type', value)}
                                options={[
                                    { value: 'solid', label: '实线' },
                                    { value: 'dashed', label: '虚线' },
                                    { value: 'dotted', label: '点线' }
                                ]}
                            />
                        </Form.Item>
                    </>
                )}
            </Form>
        );
    };

    // 渲染坐标轴名称配置
    const renderAxisNameConfig = (axis: 'x' | 'y') => {
        const axisName = axis === 'x' ? xAxisName : yAxisName;
        const handleNameChange = (key: string, value: any) => {
            handleAxisNameChange(axis, key, value);
        };

        return (
            <Form layout="vertical" size="small">
                <Form.Item style={{ marginBottom: 12 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <Typography.Text>显示坐标轴名称</Typography.Text>
                        <Switch
                            checked={Boolean(axisName.show)}
                            onChange={(checked) => handleNameChange('show', checked)}
                            size="small"
                        />
                    </div>
                </Form.Item>

                {Boolean(axisName.show) && (
                    <>
                        <Form.Item label="名称文本" style={{ marginBottom: 12 }}>
                            <Input
                                size="small"
                                value={axisName.text || (axis === 'x' ? 'X轴' : 'Y轴')}
                                onChange={(e) => handleNameChange('text', e.target.value)}
                                placeholder="坐标轴名称"
                            />
                        </Form.Item>

                        <Form.Item label="位置" style={{ marginBottom: 12 }}>
                            <Select
                                size="small"
                                style={{ width: '100%' }}
                                value={axisName.location || 'end'}
                                onChange={(value) => handleNameChange('location', value)}
                                options={[
                                    { value: 'start', label: '起点' },
                                    { value: 'middle', label: '中间' },
                                    { value: 'end', label: '终点' }
                                ]}
                            />
                        </Form.Item>

                        <Row gutter={[16, 0]}>
                            <Col span={12}>
                                <Form.Item label="文字颜色" style={{ marginBottom: 12 }}>
                                    <div style={{ display: 'flex', alignItems: 'center' }}>
                                        <Input
                                            type="color"
                                            value={axisName.textStyle?.color || '#333'}
                                            onChange={(e) => handleNameChange('textStyle.color', e.target.value)}
                                            size="small"
                                            style={{ width: '100%' }}
                                        />
                                        <div
                                            style={{
                                                width: 20,
                                                height: 20,
                                                marginLeft: 8,
                                                backgroundColor: axisName.textStyle?.color || '#333',
                                                border: '1px solid #d9d9d9',
                                                borderRadius: 4
                                            }}
                                        />
                                    </div>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="字号" style={{ marginBottom: 12 }}>
                                    <InputNumber
                                        min={8}
                                        max={24}
                                        size="small"
                                        value={axisName.textStyle?.fontSize || 12}
                                        onChange={(value) => handleNameChange('textStyle.fontSize', value)}
                                        style={{ width: '100%' }}
                                    />
                                </Form.Item>
                            </Col>
                        </Row>

                        <Form.Item label="字体粗细" style={{ marginBottom: 12 }}>
                            <Select
                                size="small"
                                style={{ width: '100%' }}
                                value={axisName.textStyle?.fontWeight || 'normal'}
                                onChange={(value) => handleNameChange('textStyle.fontWeight', value)}
                                options={[
                                    { value: 'normal', label: '正常' },
                                    { value: 'bold', label: '粗体' },
                                    { value: 'bolder', label: '特粗' },
                                    { value: 'lighter', label: '细体' }
                                ]}
                            />
                        </Form.Item>
                    </>
                )}
            </Form>
        );
    };

    // 根据当前选中的配置选项卡渲染内容
    const renderConfigByTab = (axis: 'x' | 'y') => {
        switch (activeConfigTab) {
            case 'basic':
                return renderBasicConfig(axis);
            case 'textStyle':
                return renderTextStyleConfig(axis);
            case 'axisLine':
                return renderAxisLineConfig(axis);
            case 'axisTick':
                return renderAxisTickConfig(axis);
            case 'splitLine':
                return renderSplitLineConfig(axis);
            case 'axisName':
                return renderAxisNameConfig(axis);
            case 'advanced':
                return renderAdvancedConfig(axis);
            default:
                return renderBasicConfig(axis);
        }
    };

    // 配置标签页数据
    const configTabItems = [
        {
            key: 'basic',
            label: '基本',
            children: renderConfigByTab(activeTab as 'x' | 'y')
        },
        {
            key: 'textStyle',
            label: '文字样式',
            children: renderConfigByTab(activeTab as 'x' | 'y')
        },
        {
            key: 'axisLine',
            label: '轴线',
            children: renderConfigByTab(activeTab as 'x' | 'y')
        },
        {
            key: 'axisTick',
            label: '刻度线',
            children: renderConfigByTab(activeTab as 'x' | 'y')
        },
        {
            key: 'splitLine',
            label: '分割线',
            children: renderConfigByTab(activeTab as 'x' | 'y')
        },
        {
            key: 'axisName',
            label: '轴名称',
            children: renderConfigByTab(activeTab as 'x' | 'y')
        },
        {
            key: 'advanced',
            label: '高级',
            children: renderConfigByTab(activeTab as 'x' | 'y')
        }
    ];

    return (
        <div style={{ padding: 12, background: '#fff', borderRadius: 4 }}>
            {/* 预览区域 - 折叠面板风格 */}
            <div
                style={{
                    marginBottom: 16,
                    border: '1px solid #d9d9d9',
                    borderRadius: 4,
                    overflow: 'hidden'
                }}
            >
                {/* 预览标题栏 */}
                <div style={{
                    padding: '8px 12px',
                    borderBottom: '1px solid #f0f0f0',
                    backgroundColor: '#fafafa',
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center'
                }}>
                    <Typography.Text strong>坐标轴预览</Typography.Text>
                    <Space>
                        <Space>
                            <Typography.Text style={{ fontSize: 12 }}>轴标签</Typography.Text>
                            <Switch
                                size="small"
                                checked={Boolean(activeTab === 'x' ? xAxisLabel.show : yAxisLabel.show)}
                                onChange={(checked) => handleAxisLabelChange(activeTab as 'x' | 'y', 'show', checked)}
                            />
                        </Space>
                        <Space>
                            <Typography.Text style={{ fontSize: 12 }}>轴名称</Typography.Text>
                            <Switch
                                size="small"
                                checked={Boolean(activeTab === 'x' ? xAxisName.show : yAxisName.show)}
                                onChange={(checked) => handleAxisNameChange(activeTab as 'x' | 'y', 'show', checked)}
                            />
                        </Space>
                        <Button
                            type="text"
                            size="small"
                            icon={<ExportOutlined />}
                            onClick={handleExportConfig}
                        />
                        <Popover
                            content={presetsContent}
                            title={null}
                            trigger="click"
                            placement="bottomRight"
                        >
                            <Button
                                type="text"
                                size="small"
                                icon={<SettingOutlined />}
                            />
                        </Popover>
                    </Space>
                </div>

                {/* 预览内容 */}
                <div style={{ padding: 16, height: 180 }}>
                    {renderPreview()}
                </div>
            </div>

            {/* X轴与Y轴选择器 */}
            <Tabs
                activeKey={activeTab}
                onChange={setActiveTab}
                size="small"
                type="card"
                tabBarStyle={{ marginBottom: 16 }}
                items={[
                    {
                        key: 'x',
                        label: 'X轴标签'
                    },
                    {
                        key: 'y',
                        label: 'Y轴标签'
                    }
                ]}
            />

            {/* 配置选项卡 */}
            <Tabs
                activeKey={activeConfigTab}
                onChange={setActiveConfigTab}
                size="small"
                tabBarStyle={{ marginBottom: 0 }}
                items={configTabItems}
            />

            {/* 保存预设模态对话框 */}
            <Modal
                title="保存为预设样式"
                open={showPresetModal}
                onOk={handleSavePreset}
                onCancel={() => setShowPresetModal(false)}
                okText="保存"
                cancelText="取消"
            >
                <div style={{ marginBottom: 16 }}>
                    <Typography.Paragraph>
                        将当前坐标轴标签配置保存为预设，方便下次快速应用。
                    </Typography.Paragraph>
                </div>
                <Form.Item label="预设名称" required>
                    <Input
                        placeholder="请输入预设名称"
                        value={presetName}
                        onChange={(e) => setPresetName(e.target.value)}
                        autoFocus
                    />
                </Form.Item>
            </Modal>
        </div>
    );
};

export default AxisConfig;
